body{
    padding-left: 100px;
}
.box{
    position: relative;
    display: inline-block;
    width: 400px;
    height: 150px;
    overflow: hidden;
    /* background-color: gray; */
    padding-left: 100px;
}
.p1{
    position: absolute;
    top: 10px;
    left: 156px;
    width: 190px;
    height: 129px;
    box-sizing: border-box;
    border-radius: 15px 15px 0px 0px;
    border: 8px solid #242d3b;
    animation: p1an 0.5s ease;
}
.p1-v1{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 174px;
    height: 113px;
    background-color: #ced8e3;
    animation: planv1 0.5s ease;
}
.p2{
    position: absolute;
    top: 150px;
    left: 193px;
    display: inline-block;
    width: 115px;
    height: 135px;
    box-sizing: border-box;
    padding: 17px;
    background-color: #ffffff;
    line-height: 15px;
    text-align: right;
    animation:  p2an 0.5s ease 1s;
    animation-fill-mode:forwards;
}
.p2>span{
    display: inline-block;
    opacity: 0;
    width: 82px;
    height: 5px;
    background-color: #d8e0ea;
    animation: p3ansp 1s ease 2s;
    animation-fill-mode:forwards;
}
.p2>span:nth-child(3),.p2>span:nth-child(4){
    width: 49px;
}
.p2>i{
    position: absolute;
    opacity: 0;
    top: 55px;
    left: 17px;
    display: inline-block;
    width: 23px;
    height: 20px;
    background-color: #d8e0ea;
    animation: p3ansp 1s ease 2s;
    animation-fill-mode:forwards;
}
.p3{
    position: absolute;
    display: inline-block;
    top: 140px;
    left: 134px;
    width: 232px;
    height: 8px;
    background-color: #c4ccd9;
    border-radius: 0px 0px 10px 10px;
    animation: p3an 0.5s ease;
}
.p3>span{
    position: absolute;
    /* opacity: 0; */
    top: 0px;
    left: 99px;
    display: inline-block;
    width: 33px;
    height: 4px;
    background-color: #99a2b3;
    border-radius: 0px 0px 5px 5px;
    animation: p3ansp 2.5s linear;
}
.p4{
    position: absolute;
    top: 40px;
    left: 134px; 
    width: 0px;
    height: 41px;
    background-color: #2964f3;
    border-radius: 3px;
    line-height: 6px;
    box-sizing: border-box;
    padding-top: 4px;
    text-align: center;
    animation: p4an 0.5s ease 2s;
    animation-fill-mode: forwards;
}
.p4>span{
    display:inline-block;
    /* width: 50px; */
    width: 0px;
    height: 4px;
    background-color: #ffffff;
    animation: p4ansp 0.5s ease 2.5s;
    animation-fill-mode: forwards;
}
.p4>i{
    position: absolute;
    top: 31px;
    left: 0px;
    border: 0px solid #2964f3;
    border-top: 0px solid transparent;
    border-right: 0px solid transparent;
    border-left: 0px solid transparent;
    transform: rotate(-44deg);
    animation: p4ani 0.5s ease 2s;
    animation-fill-mode: forwards;
}
.p5{
    position: absolute;
    top: 32px;
    left: 317px;
    width: 0px;
    height: 49px;
    background-color: #ffffff;
    text-align: center;
    line-height: 46px;
    animation: p5an 0.5s ease 2s;
    animation-fill-mode: forwards;
}
.p5>span{
    display: inline-block;
    width: 0px;
    height: 0px;
    background-color: #2964f3;
}
.p5>span:nth-child(1){
    /* background-color: red; */
    animation: p5sp 0.5s ease 2.7s;
    animation-fill-mode: forwards;
}
.p5>span:nth-child(2){
    animation: p5sp 0.5s ease 3s;
    animation-fill-mode: forwards;
}
.p5 span:nth-child(3){
    animation: p5sp 0.5s ease 3.3s;
    animation-fill-mode: forwards;
}
.p2-v1{
    position: absolute;
    top: 165px;
    left: 83px;
    width: 15px;
    height: 79px;
    background-color: #2863f3;
    animation: p2v1 0.5s ease 2s;
    animation-fill-mode: forwards;
}
.p2-v1>em{
    position: absolute;
    top: -22px;
    left: -1px;
    width: 5px;
    height: 10px;
    border: 6px solid #dfe6f0;
    border-top: 6px solid transparent;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
}
.p2-v1>i{
    position: absolute;
    top: -14px;
    left: 4px;
    border: 4px solid #000;
    border-top: 4px solid transparent;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}



/* css3 */

@keyframes p3an{
    0%{
        width: 0px;
        left: 243px;
    }100%{
        width: 232px;
        left: 134px;
    }
}
@keyframes p3ansp{
    0%{
        opacity: 0;
    }100%{
        opacity: 1;
    }
}
@keyframes p1an{
    0%{
        width: 0px;
        height: 0px;
        top: 153px;
        left: 248px;
    }100%{
        height: 129px;
        top: 10px;
        left: 156px;
    }
}
@keyframes planv1{
    0%{
        width: 0px;
    }100%{
        width: 174px;
    }
}
@keyframes p2an{
    0%{
        top: 150px;
    }100%{
        top: -4px;
    }
}
@keyframes p2v1{
    0%{
        top: 165px;
    }25%{
        top:36px;
       
    }50%{
        top: 56px;
    }75%{
        top:46px;
        transform: rotate(5deg);
    }100%{
        top: 56px;
    }
}
@keyframes p4an{
    0%{
        width: 0px;
    }100%{
        width: 65px;
    }
}
@keyframes p4ansp{
    0%{
        width: 0px;
    }100%{
        width: 50px;
    }
}
@keyframes p4ani{
    0%{
        border: 0px solid #2964f3;
        border-top: 0px solid transparent;
        border-right: 0px solid transparent;
        border-left: 0px solid transparent;
    }100%{
        border: 10px solid #2964f3;
        border-top: 10px solid transparent;
        border-right: 10px solid transparent;
        border-left: 10px solid transparent;
    }
}


@keyframes p5an{
    0%{
        width: 0px;
    }100%{
        width: 49px;
    }
}
@keyframes p5sp{
    0%{
        width: 0px;
        height: 0px;
    }100%{
        width: 7px;
        height: 7px;
    }
}